<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华联</title>
    <meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content=yes name=apple-mobile-web-app-capable>
    <meta content=yes name=apple-touch-fullscreen>
    <meta content="telephone=no,email=no" name=format-detection>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        html{
            font-size: 20px;
            height: 100%;
        }
        body{
            height: 100%;
            overflow: hidden;
            text-align: center;
            color: #dd047e;
        }
        h2{
            font-size: 1.8rem;
            margin-top: 3rem;
            width: 100%;
            height: 3rem;
        }
        .pointBox{
            width: 80%;
            height: 10rem;
            line-height: 10rem;
            font-size: 2rem;
            border: 1px solid #dd047e;
            border-radius: 4px;
            margin: 1rem auto;
        }
        #conBox{
            width: 80%;
            height: 50%;
            border-radius: 4px;
            background: #fff;
            padding: 1.5rem;
            margin: 0 auto;
            overflow: hidden;
            box-sizing: border-box;
        }
        .clearfix:after{
            content: '';
            clear: both;
            display: block;
        }
        #conBox button{
            width: 5rem;
            height: 2.5rem;
            border-radius: 4px;
            text-align: center;
            font-size: 1.2rem;
            float: left;
            background: #fff;
        }
        #conBox .huode{
            border: 1px solid #dd047e;
            color: #dd047e;

        }
        #conBox .shiyong{
            border: 1px solid #45177d;
            color: #45177d;
            float: right;
        }
        #conBox .huode.active{
            background: #dd047e;
            color: #fff;
        }
        #conBox .shiyong.active{
            background: #45177d;
            color: #fff;
        }
        ul{
            width: 100%;
            height: 30rem;
            overflow: auto;
            display: none;
            margin-top: 1.5rem;
        }
        ul.active{
            display: block;
        }
        li{
            width: 100%;
            height: 4rem;
            border-radius: 4px;
            padding: 0.4rem;
            box-sizing: border-box;
            margin-bottom: 1rem;
        }
        #ul1 li{
            color: #dd047e;
            border: 1px solid #dd047e;
        }
        #ul2 li{
            color: #45177d;
            border: 1px solid #45177d;
        }
        li div{
            float: left;
        }
        li div h5{
            font-size: 1.3rem;
            text-align: left;
            margin-left: 14px;
        }
        li div p{
            font-size: 1rem;
            margin-left: 14px;
        }
        li .point{
            float: right;
            margin-top: 0.8rem;
            font-size: 1.2rem;
            margin-right: 2rem;
        }
    </style>
    <script>
        function fn() {
            document.documentElement.style.fontSize=document.documentElement.clientWidth*20/640+'px';
        }
        document.addEventListener('DOMContextLoaded',fn,false)
        window.addEventListener('resize',fn);
        window.addEventListener('orientationchange',fn);
        window.addEventListener('load',fn);

    </script>
</head>
<body>
    <div class="context">
        <h2>我的积分</h2>
        <div class="pointBox">
            华联V金余额：960
        </div>
        <div id="conBox">
            <p class="clearfix">
                <button class="huode active">已获得</button>
                <button class="shiyong">已使用</button>
            </p>
            <ul id="ul1" class="active">
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
            </ul>
            <ul id="ul2">
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
                <li>
                    <div>
                        <h5>购买<span>雪中飞</span></h5>
                        <p>2020年11月11日</p>
                    </div>
                    <div class="point">
                        +1660
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    <!-- <button>返回</button> -->
    <div class="bottom"></div>
</body>
</html>
<script src="../../../utils/zepto.min.js"></script>
<script src="../../../utils/baseUrl.js"></script>
<script>
   $('.huode').click(function () {
        $('.huode').addClass('active');
        $('.shiyong').removeClass('active');
        $('#ul1').addClass('active');
        $('#ul2').removeClass('active');
   });
   $('.shiyong').click(function () {
       $('.huode').removeClass('active');
       $('.shiyong').addClass('active');
       $('#ul1').removeClass('active');
       $('#ul2').addClass('active');
   });

   var phone=window.localStorage.getItem('phone')

   $.ajax({
       type:'post',
       headers:{
           'type':'会员积分获取情况对应的操作',
           'token':window.localStorage.getItem('token')
       },
       url:baseUrl+'/user?phone='+phone,
       success:function (res) {
           console.log(res)
           $('#ul1').html('');
           $(res.data).each(function (i,v) {
               $('#ul1').append(`
                    <li>
                        <div>
                            <h5>购买<span>${v.brandName}</span></h5>
                            <p>${v.date}</p>
                        </div>
                        <div class="point">
                            +${v.brandPoints}
                        </div>
                    </li>
               `)
           });
       }
   });
   $.ajax({
       type:'post',
       headers:{
           'type':'获取积分兑换情况对应的操作',
          // 'token':window.localStorage.getItem('token')
       },
       url:baseUrl+'/user?phone='+phone,
       success:function (res) {
           console.log(res)
           $('#ul2').html('');
           $(res.data).each(function (i,v) {
               $('#ul2').append(`
                    <li>
                        <div>
                            <h5>兑换<span>${v.goods_name}</span></h5>
                            <p>${v.pe_date}</p>
                        </div>
                        <div class="point">
                            -${v.goods_points}
                        </div>
                    </li>
               `)
           });
       }
   });

   $.ajax({
       type:'post',
       url:baseUrl+'/user?phone='+phone,
       headers:{
           'type':'login',
       },
       success:function (res) {
           $('.pointBox').text('华联V金余额：'+res.points)
       }
   })
</script>







